<!--  -->

<style lang='scss' type='stylesheet/scss' scoped>
.handler-box-warpper {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  .box-warpper {
    position: relative;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.16);
    padding: 33px 33px 22px;
    background: white;
    box-sizing: border-box;
    width: 500px;
    .el-icon-close {
      position: absolute;
      top: 0;
      right: 0;
      font-size: 24px;
      cursor: pointer;
      padding: 22px;
      box-sizing: border-box;
    }
    .title {
      text-align: center;
      font-size: 20px;
      width: 80%;
      margin: 0 auto;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .inner-box {
      width: 100%;
      background: #eaeaea;
      margin-top: 40px;
    }
  }
}

.scroll {
  height: 400px;
}

.button-box {
  width: 100%;
  display: flex;
  line-height: 48px;
  text-align: center;
  color: white;
  margin-top: 22px;
  .new-folder {
    margin-right: 20px;
    background: #ccc;
    flex: 1;
    cursor: pointer;
  }
  .submit-button {
    flex: 1;
    background: black;
    cursor: pointer;
  }
}
</style>

<template>
  <div class="handler-box-warpper">
    <div class="box-warpper">
      <i class="el-icon-close"
         @click="$emit('update:visible',false)"></i>
      <div class="title"><span style="margin-right:10px">{{handlerType==='COPY'?'拷贝':'移动'}}至</span> {{activedFile.name}}</div>
      <div class="inner-box">
        <el-scrollbar class="scroll">
          <file-item :file="item"
                     @updateFileList="updateFileList"
                     @hideInput="hideInput"
                     :newFolderVisible="newFolderVisible"
                     :activedFile="activedFile"
                     :index="1"
                     @checkFile="checkFile"
                     :key="item.id"
                     v-for="item in boxFileList"></file-item>
        </el-scrollbar>
      </div>
      <div class="button-box">
        <div class="new-folder"
             @click="newFolder">新建文件夹</div>
        <div class="submit-button"
             @click="handlerSubmit">{{handlerType==='COPY'?'拷贝':'移动'}}</div>
      </div>
    </div>
  </div>
</template>

<script type='text/ecmascript-6'>
import { mapGetters } from "vuex";
import fileItem from "./file-item";
export default {
  components: { fileItem },
  props: ["visible", "handlerType"],
  computed: {
    ...mapGetters(["fileList"])
  },
  data() {
    return {
      newList: [],
      activedFile: {
        id: 0,
        name: "全部文件夹"
      },
      newFolderVisible: false,
      boxFileList: [
        {
          id: null,
          isFolder: true,
          isLoad: false,
          isLoading: false,
          open: true,
          name: "全部文件夹",
          children: []
        }
      ]
    };
  },
  async created() {
    this.boxFileList.splice(0);
    this.boxFileList.push({
      id: null,
      isFolder: true,
      isLoad: false,
      isLoading: false,
      open: true,
      name: "全部文件夹",
      children: []
    });

    let file = this.boxFileList[0];
    file.isLoading = true;

    let list = await this.$axios.post({
      url: "file/get-file-list"
    });

    list.data.forEach(e => {
      if (e.isFolder) {
        e.open = false;
        e.children = [];
        e.isLoad = false;
        e.isLoading = false;
      }
    });

    file.children = list.data;
    file.isLoad = true;
    file.isLoading = false;

    this.activedFile = file;

    this.$store.commit("file/SORT_FILES", this.boxFileList);
  },
  methods: {
    updateFileList(fileList, folder) {
      folder.children = [];
      folder.isLoading = false;
      folder.isLoad = true;
      folder.open = false;
      fileList.children.push(folder);

      this.$store.commit("file/SORT_FILES", this.boxFileList);
    },
    getFileList(parentId) {
      return new Promise(async (resolve, reject) => {
        let list = await this.$axios.post({
          url: "file/get-file-list",
          data: {
            parentId
          }
        });

        list.data.forEach(e => {
          if (e.isFolder) {
            e.open = false;
            e.children = [];
            e.isLoad = false;
            e.isLoading = false;
          }
        });

        resolve(list.data);
      });
    },
    async handlerSubmit() {
      if (this.handlerType === "COPY") {
        this.$store.dispatch("file/copyFiles", {
          toFile: this.activedFile,
          call: () => {
            this.$emit("update:visible", false);
          }
        });
      } else {
        this.$store.dispatch("file/moveFiles", {
          toFile: this.activedFile,
          call: () => {
            this.$emit("update:visible", false);
          }
        });
      }
    },
    async checkFile(file) {
      if (file.isFolder) {
        file.open = !file.open;
        this.activedFile = file;
      }

      if (file.isFolder && !file.isLoad && !file.isLoading) {
        file.isLoading = true;

        let list = await this.getFileList(file.id);

        file.isLoading = false;
        file.isLoad = true;
        file.children = list;

        this.$store.commit("file/SORT_FILES", this.boxFileList);
      }
    },
    newFolder() {
      this.activedFile.open = true;
      this.newFolderVisible = true;
    },
    hideInput() {
      this.newFolderVisible = false;
    }
  }
};
</script>
